<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		 学习主体：针对页面操作比较多-----DOM操作
         JQuery操作DOM   理解：JQ框架改变页面内容效果
		 js基础就可以直接学习，了解函数使用
		 基础函数---事件源之后出现，事件源语法糖中
		 html()   作用：增加一个元素，覆盖原有html
		 val（）   作用：针对input元素，实现修改文本框内容
		 text（）   作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1(1).js"></script>
		 
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe iste enim molestiae odit, pariatur impedit numquam quasi rem cum, facilis et officia id aperiam vitae possimus quaerat earum. Rerum, molestiae!</p>
		
			<div style="width: 200px; height: 200px; background: #000000;"></div>
			<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repellendus, esse corrupti qui ad mollitia recusandae impedit modi eum aliquam perferendis nemo quidem laborum molestias eligendi deserunt a totam. Similique!</h3>
		  <input type="button" value="按钮2" />
		  <input type="text" value="输入框可以直接写文本" />
		<script>
			 $("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			}); 
			/* 练习：div  200*200  背景颜色自定，鼠标滑过之后，
			下面内容修改 ，<h3>提示，修改为黄颜色 */
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>");
				});
			/* 练习2，  按钮   文本框   点击按钮，文本增加一行文本 */
			$("input[type='button']").click(function(){
				alert("jq选择器是否选中");
				$("input[type='text']").val("文本框内容修改~")
			});
			/* 利用JQ操作DOM(页面效果） ：1.元素内容操作（3个函数）
			                              html()
										  val()
										  text()
			                             2.属性操作（4个函数）
										 <p align="center">
										 attr()
										 removeAttr()
										 <input checked>
										 prop()
										 removeProp()
										 3.样式类名操作（4个函数）
										 .demo{属性：属性值...}
										 addClass()
										 removeClass()
										 tooggleClass()
										 hasClass()
										 4.元素样式操作（5个函数）
										css()
										$("选择器").attr().addClass()
										width（）和height（）
										outerWidth和outerHeight()
										语法：css("css属性","css属性值")																
										5. 插入和删除操作（7个函数）
										append（）和prepend（）
										after（）和before（）
										remove（）和empty（）
										replaceWith（）
										  6.元素遍历操作（6个函数）
										  7.JQ动画操作（7个函数）
					*/
		</script>
	</body>
</html>